<template>
    <view class="content">
        <uni-nav-bar class="mynavbar" title="编辑资料" @clickLeft="back">
          <block slot="left"><div class="uni-page-head-hd"><div class="uni-page-head-btn"><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></i></div></div></block>
          <block slot="right">
            <button class="nav-uni-mini">保存</button>
          </block>
        </uni-nav-bar>
        <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
          <view class="uni-list">
            <view class="uni-list-cell uni-list-cell-pd able" @click="chooseImage">
              <view class="uni-list-cell-db avatarIn"><image class="" :src="avatar"></view>
              <view class="soltValue">
                <text class="uni-navigate-icon uni-icon">&#xe470;</text>
              </view>
            </view>
            <view class="uni-list-cell uni-list-cell-pd able">
              <view class="uni-list-cell-db">昵称</view>
              <view class="soltValue">
                <input class="value" type="text" v-model="nickname" placeholder="在此写下">
                <!-- <text class="value" v-if="nickname">{{nickname}}</text>
                <text v-if="!nickname">在此写下</text> -->
                <!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
              </view>
            </view>
            <view class="uni-list-cell uni-list-cell-pd able">性别
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChange" :value="index" :range="picker" ref="genderPicker">
                  <view class="picker-input">
                    <text class="value" v-if="gender">{{gender}}</text>
                    <text v-if="!gender" class="soltValue">请选择</text>
                    <text class="uni-navigate-icon uni-icon">&#xe470;</text>
                  </view>
                </picker>
              </view>
            </view>
            <view class="uni-list-cell uni-list-cell-pd able">出生日期
              <view class="uni-list-cell-db">
                <picker mode="date" :value="birthday" @change="bindDateChange" :end="$global.today">
                              <view class="picker-input">
                    <text class="value" v-if="birthday">{{birthday}}</text>
                    <text v-if="!birthday" class="soltValue">请选择</text>
                    <text class="uni-navigate-icon uni-icon">&#xe470;</text>
                  </view>
                </picker>
              </view>
            </view>
            <view class="uni-list-cell uni-list-cell-pd able">
              <view class="uni-list-cell-db">个性签名</view>
              <view class="soltValue">
                <input class="value" type="text" v-model="gxqm" placeholder="">
              </view>
            </view>
            <view class="uni-list-cell uni-list-cell-pd able">
              <view class="uni-list-cell-db require">真实姓名</view>
              <view class="soltValue">
                <input class="value" type="text" v-model="zsxm" placeholder="">
                <!-- <text class="value" v-if="zsxm">{{zsxm}}</text> -->
                <!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
              </view>
            </view>
            <view class="uni-list-cell uni-list-cell-pd able">
              <view class="uni-list-cell-db require">手机号码</view>
              <view class="soltValue">
                <input class="value" type="text" v-model="sjhm" placeholder="">
                <!-- <text class="value" v-if="sjhm">{{sjhm}}</text> -->
                <!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
              </view>
            </view>
        </view>
    </scroll-view>
  </view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		comments:{uniNavBar},
		data() {
			return {
				picker: ['男', '女'],
				index: 0,
				title: '编辑资料',
				avatar: '../../static/test/a2.jpg',
				nickname: '',
				gender: '',
				birthday: '',
				gxqm: '',
				zsxm: '',
				sjhm: ''
			};
		},
		methods: {
			bindPickerChange: function(e) {
				this.gender = this.picker[e.detail.value];
			},
			bindDateChange: function(e) {
					this.birthday = e.detail.value
			},
			back() {
				uni.navigateBack({
						delta: 1
				});
			},
			chooseImage: async function() {
				uni.chooseImage({
					sourceType: ['拍照或相册'],
					sizeType: ['压缩'],
					count: 1,
					success: (res) => {
					console.log(res);
							this.avatar = res.tempFilePaths[0];
					},
					fail: (err) => {
							// #ifdef APP-PLUS
							if (err['code'] && err.code !== 0) {
									this.checkPermission(err.code);
							}
							// #endif
					}
				})
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
						'android.permission.READ_EXTERNAL_STORAGE');
				if (status === null || status === 1) {
						status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
		overflow: hidden;
  }
  .mynavbar {
    height: 44px;
    overflow: hidden;
    // #ifdef APP-PLUS
    padding-top: 35px;
    // #endif
    /deep/ .uni-page-head-hd {
      transform: translateY(2px);
    }
    /deep/ .uni-nav-bar-text {
    }
  }

    .scroll-Y {
        // #ifdef APP-PLUS
        height: calc(100vh - 44px - 35px);
        // #endif
        // #ifdef H5
        height: calc(100vh - 44px);
        // #endif
  }
  .avatarIn {
    image {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
  input.value {
    font-family: uniicons;
    text-align: right;
    font-size: 14px;
  }
  .uni-list {
    .uni-input-wrapper:hover {
      .uni-input-placeholder {
        color: transparent !important;
      }
    }
    }
</style>
